<template>
    <div>
        <el-row>
          <el-col :span="2"></el-col>
          <el-col :span="10" align="right">
            <el-date-picker
              v-model="month"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="4" align="left">
            <el-button type="success" @click="exports" :disabled="loading" :loading="loading">导出数据</el-button>
          </el-col>
        </el-row>
    </div>
</template>

<script>
var startMonth="";
var endMonth="";
export default {
    data(){
        return{
            month:"",
            loading:false,
        }
    },
    mounted(){
        
    },
    methods:{
        exports(){
            if(this.month){
              startMonth=this.month[0];
              endMonth=this.month[1];
              this.loading=true;
              var address=`/api/report/cash_payment/export?startMonth=${startMonth}&&endMonth=${endMonth}`
              this.common.downloadFile(address);
              setTimeout(()=>{
                this.loading=false;
              },2000)
            }else{
              startMonth="";
              endMonth="";
              this.common.showToast("warning","请填写开始日期和结束日期")
            }
            
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
</style>
